<template>
  <div>
    <el-dialog :center = "false" :close-on-click-modal = "false" :close-on-press-escape = "false" :lock-scroll = "true"
               title = "保存模型"
               top = "20px" v-model = "dialogTableVisible" width = "50%">
      <el-form :label-position = "labelPosition" :model = "ruleForm" :rules = "rules" class = "demo-ruleForm"
               ref = "ruleForm">
        <el-form-item label = "类别" prop = "typeCode" required>
          <el-select
              placeholder = "请选择分类"
              v-model = "ruleForm.typeCode">
            <el-option
                :key = "item.value"
                :label = "item.name"
                :value = "item.value"
                v-for = "item in processData.processTypeList"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label = "名称" prop = "flowName" required>
          <el-input clearable placeholder = "请输入名称"
                    v-model = "ruleForm.flowName"></el-input>
        </el-form-item>
        <el-form-item label = "Key" prop = "flowId" required>
          <el-input clearable placeholder = "请输入Key"
                    v-model = "ruleForm.flowId"></el-input>
        </el-form-item>
        <el-form-item label = "描述" prop = "description">
          <el-input clearable placeholder = "请输入描述" type = "textarea"
                    v-model = "ruleForm.description"></el-input>
        </el-form-item>
        <el-form-item prop = "saveForNew">
          <el-checkbox label = "保存为最新版本" v-model = "ruleForm.saveForNew"/>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span = "12">
          <el-button @click = "save(0)" link type = "primary">取消</el-button>
          <el-button @click = "save(1)" link type = "primary">保存</el-button>
          <el-button @click = "save(2)" link type = "primary">保存并关闭编辑器</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <el-button-group>
      <el-tooltip class = "item" content = "发布" effect = "dark" placement = "bottom">
        <el-button @click = "confirm(2)" link type = "primary">
          <i class = "fa fa-save"></i>
        </el-button>
      </el-tooltip>
      <el-tooltip class = "item" content = "检查" effect = "dark" placement = "bottom">
        <el-button @click = "checkFlow" link type = "primary">
          <i class = "fa fa-check"></i>
        </el-button>
      </el-tooltip>
      <el-tooltip class = "item" content = "打开流程文件" effect = "dark" placement = "bottom">
        <el-button link type = "primary">
          <i class = "fa fa-folder-open"></i>
        </el-button>
      </el-tooltip>
      <el-tooltip class = "item" content = "创建新流程图" effect = "dark" placement = "bottom">
        <el-button @click = "reset" link type = "primary">
          <i class = "fa fa-plus-circle"></i>
        </el-button>
      </el-tooltip>
      <el-tooltip class = "item" content = "下载流程图" effect = "dark" placement = "bottom">
        <el-button @click = "downloadSvg" link type = "primary">
          <i class = "fa fa-picture-o"></i>
        </el-button>
      </el-tooltip>
      <el-tooltip class = "item" content = "下载流程文件" effect = "dark" placement = "bottom">
        <el-button @click = "downloadBpmn" link type = "primary">
          <i class = "fa fa-download"></i>
        </el-button>
      </el-tooltip>
      <el-tooltip class = "item" content = "撤销" effect = "dark" placement = "bottom">
        <el-button @click = "undo" link type = "primary">
          <i class = "fa fa-rotate-left"></i>
        </el-button>
      </el-tooltip>
      <el-tooltip class = "item" content = "恢复" effect = "dark" placement = "bottom">
        <el-button @click = "redo" link type = "primary">
          <i :class = "!canRedo?'default-undo':''"
             class = "fa fa-rotate-right"
          ></i>
        </el-button>
      </el-tooltip>
      <el-tooltip class = "item" content = "水平对齐" effect = "dark" placement = "bottom">
        <el-button @click = "elementAlign(1)" link type = "primary">
          <i
              class = "fa fa-flip-horizontal"></i>
        </el-button>
      </el-tooltip>
      <el-tooltip class = "item" content = "垂直对齐" effect = "dark" placement = "bottom">
        <el-button @click = "elementAlign(2)" link type = "primary">
          <i
              class = "fa fa-flip-vertical"></i>
        </el-button>
      </el-tooltip>
      <el-tooltip class = "item" content = "放大" effect = "dark" placement = "bottom">
        <el-button @click = "zoom(0.05)" link type = "primary">
          <i class = "fa fa-search-plus"></i>
        </el-button>
      </el-tooltip>
      <el-tooltip class = "item" content = "缩小" effect = "dark" placement = "bottom">
        <el-button @click = "zoom(-0.05)" link type = "primary">
          <i class = "fa fa-search-minus"></i>
        </el-button>
      </el-tooltip>
      <el-tooltip class = "item" content = "重置" effect = "dark" placement = "bottom">
        <el-button @click = "zoom(0)" link type = "primary">
          <i class = "fa fa-arrows"></i>
        </el-button>
      </el-tooltip>
    </el-button-group>
  </div>
</template>

<script>
import {postRequest} from "../../api/star_horse";
import {warning} from "../../utils/message";

export default {
  name: "JbpmHeader",
  data() {
    return {
      scale: 1.0,
      dialogTableVisible: false,
      labelPosition: "top",
      ruleForm: {},
      canRedo: false
    }
  },
  props: {
    processData: {
      type: Object
    },
    modeler: {
      type: Object
    }
  },
  components: {},
  methods: {
    confirm(type) {
      this.dialogTableVisible = !this.dialogTableVisible;
      this.ruleForm = this.processData;
    },
    checkFlow() {
      this.$emit("flowCheck");
    },
    /**
     *
     * @param type 2 垂直对齐 1 水平对齐
     */
    elementAlign(type) {
      // warning("功能开发中");
      // this.modeler.get("alignElements").trigger("bottom");
      this.modeler.get("elements.align").trigger("bottom");
      //alignElements.trigger(Elements, type);
    },
    async deploy() {
      let that = this;
      const result_xml = await that.modeler.saveXML();
      const result_svg = await that.modeler.saveSVG();
      const {xml} = result_xml;
      const {svg} = result_svg;
      postRequest("jbpm/deploy", {
        processKey: "test",
        processName: "test",
        resourceName: "test",
        xml: xml,
        svg: svg
      }).then((data) => {

      }).catch(err => {
        warning(err);
      });
    },

    async save(type) {
      let that = this;
      const result_xml = await that.modeler.saveXML();
      const result_svg = await that.modeler.saveSVG();
      const {xml} = result_xml;
      const {svg} = result_svg;
      that.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return;
        }
        if (type > 0) {
          if (that.ruleForm["typeCode"]) {
            let type = that.processData.processTypeList.find(itm => itm.value === that.ruleForm["typeCode"]);
            that.ruleForm["typeName"] = type.name;
          }
          that.ruleForm["flowXml"] = xml;
          that.ruleForm["flowSvg"] = svg;
          that.$emit("processSave", that.ruleForm);
        }
        if (type == 2 || type == 0) {
          that.dialogTableVisible = !that.dialogTableVisible;
        }
      });
    },
    reset() {
      this.$emit('restart')
    },

    downloadSvg() {
      this.$emit("handleExportSvg")
    },
    downloadBpmn() {
      this.$emit("handleExportBpmn");
    },
    undo() {
      this.modeler.get('commandStack').undo();
      this.canRedo = this.modeler.get('commandStack').canRedo();
    },
    redo() {
      if (!this.canRedo) {
        return;
      }
      this.modeler.get('commandStack').redo()
      this.canRedo = this.modeler.get('commandStack').canRedo();
    },
    zoom(val) {
      let newScale = !val ? 1.0 : ((this.scale + val) <= 0.2) ? 0.2 : (this.scale + val);
      this.modeler.get('canvas').zoom(newScale);
      this.scale = newScale;
    }
  }
}
</script>

<style scoped>

</style>
